<script setup lang="tsx">
import { computed, CSSProperties, onMounted, ref } from 'vue';
import { $t } from '@/locales';

import { SysnoticeApi } from '@/api-services/apis/sysnotice-api';
import { ApiSysNoticeOut, ApiSysNoticeQuery, NoticeType } from '@/api-services';

import { feature, getAPI } from '@/axios-utils';
import { queryDone } from '@/utils/api';
import { useRouterPush } from '@/hooks/common/router';
defineOptions({
  name: 'Notices'
});

const newses = ref<ApiSysNoticeOut[]>([]);

const query: ApiSysNoticeQuery = {
  pageIndex: 1,
  pageSize: 5
}
//获取最多五条通知公告
const handleGetNotices = async () => {

  const [err, res] = await feature(getAPI(SysnoticeApi).getList(query));

  queryDone(err, async () => {
    newses.value = res?.data.data?.items!;
  })
}
const { routerPushByKey } = useRouterPush(true);



const titleList = ['通知', '公告'];
const colorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];


onMounted(() => {
  handleGetNotices();
});
</script>

<template>
  <ElCard :bordered="false" size="small" class="card-wrapper">
    <template #header>
      <div class="w-full flex justify-between items-center">
        <span>{{ $t('page.home.notices.title') }}</span>
        <span class="text-primary cursor-pointer" @click="routerPushByKey('sys-setting_sys-notice')">{{
          $t('page.home.notices.moreNotice') }}
        </span>
      </div>
    </template>

    <div>

    </div>

    <div class="notice-list">
      <!-- 遍历通知数据 -->
      <div v-for="(item, index) in newses" :key="index" class="notice-item">
        <!-- 左侧头像：使用 Element Plus 的 Avatar 组件 -->
        <ElAvatar :style="{ backgroundColor: colorList[item.noticeType!] }">{{ titleList[item.noticeType!] }}
        </ElAvatar>

        <!-- 右侧内容区：标题 + 时间 -->
        <div class="notice-content">
          <div class="notice-title">{{ item.title }}</div>
          <div class="notice-time">{{ item.creationTime }}</div>
        </div>
      </div>
    </div>
  </ElCard>
</template>

<style scoped>
/* 列表容器 */
.notice-list {
  /* 可根据实际布局调整宽度 */
  /* width: 300px;  */
}

/* 单个通知项：Flex 布局 */
.notice-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #ebeef5;
  /* 底部分割线 */
}

/* 头像样式（可按需调整大小、颜色） */
.notice-avatar {
  /* 如果 background-color 属性不生效，可强制覆盖 */
  /* background-color: #f56c6c !important; */
}

/* 内容区：与头像保持间距 */
.notice-content {
  margin-left: 10px;
}

/* 标题样式 */
.notice-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
}

/* 时间样式：灰色、小字体 */
.notice-time {
  font-size: 12px;
  color: #999;
}
</style>
